/**
 * Created by zq on 2017/2/24.
 */
$(function(){
    var data={
        "cumtrapz": 19000,//累计分数
        "level": [
            {
                "levelCond": 1,
                "levelName": "U1",
                "listMemberWeal": [{
                    "wealCode": "fl003",
                    "wealId": 3,
                    "wealName": "超级会员8折",
                    "flag": "N"
                },
                    {
                        "wealCode": "fl002",
                        "wealId": 2,
                        "wealName": "全场免邮",
                        "flag": "N"
                    },
                    {
                        "wealCode": "fl001",
                        "wealId": 1,
                        "wealName": "商品会员价",
                        "flag": "Y"
                    }]
            },
            {
                "levelCond": 2000,
                "levelName": "U2",
                "listMemberWeal": [{
                    "wealCode": "fl003",
                    "wealId": 3,
                    "wealName": "超级会员8折",
                    "flag": "N"
                },
                    {
                        "wealCode": "fl002",
                        "wealId": 2,
                        "wealName": "全场免邮",
                        "flag": "Y"
                    },
                    {
                        "wealCode": "fl001",
                        "wealId": 1,
                        "wealName": "商品会员价",
                        "flag": "Y"
                    }]
            },
            {
                "levelCond": 10000,//等级积分条件
                "levelName": "U3",//等级名称
                "listMemberWeal": [{
                    "wealCode": "fl003",
                    "wealId": 3,
                    "wealName": "超级会员8折",//福利名称
                    "flag": "Y"//该会员等级是否拥有该福利，Y：有，N:没有
                },
                    {
                        "wealCode": "fl002",
                        "wealId": 2,
                        "wealName": "全场免邮",
                        "flag": "Y"
                    },
                    {
                        "wealCode": "fl001",
                        "wealId": 1,
                        "wealName": "商品会员价",
                        "flag": "Y"
                    },]
            },{
                "levelCond": 20000,//等级积分条件
                "levelName": "U4",//等级名称
                "listMemberWeal": [{
                    "wealCode": "fl003",
                    "wealId": 3,
                    "wealName": "超级会员8折",//福利名称
                    "flag": "Y"//该会员等级是否拥有该福利，Y：有，N:没有
                },
                    {
                        "wealCode": "fl002",
                        "wealId": 2,
                        "wealName": "全场免邮",
                        "flag": "Y"
                    },
                    {
                        "wealCode": "fl001",
                        "wealId": 1,
                        "wealName": "商品会员价",
                        "flag": "Y"
                    },]
            }],
        "levelName": "U4",//等级名称
        "rank": "35%",//排行
        "upgrade": 334//升级所需分数
    }
    new Vue({
        el: '#myMember',
        data: data,
        methods:{
            getData: function(){
//                    $.ajax({
//                        success: function(data) {
//                            vm.data = data;
//                        }
//                    })
            }
        }
    });
    var i=1;
    animateMove(i)
    function  animateMove(i){
        var cumtrapz=data.cumtrapz;
        var levelCond=data.level[i].levelCond;
        var levelLength=data.level.length;
        var MidPli=$('.Midplan li');
        var tdWidth=$('table tbody tr td:last-child').width();
        MidPli.css('width',630/(levelLength-1)+'px').last().css('width','0px');
        $('table tbody tr td span').css('margin-left',tdWidth/data.level[i-1].listMemberWeal.length-50+'px')
        $('.MidUpgrade').text(('升级到'+ data.level[i+1].levelName+'还需：'+data.upgrade+'')).addClass('fontBlod')
        $('.bar').first().css('display','inline-block').
        animate({'width':(cumtrapz>levelCond?levelCond:cumtrapz)/levelCond*100+'%'},3000,function mynext(){
            if($(this).width()==MidPli.width()){
                i++;
                $(this).parent().next().find('span').addClass('active');
                if(data.levelName==data.level[i-1].levelName){
                    var nowcum=(cumtrapz-data.level[i-1].levelCond);
                    $(this).parent().next().find('.bar').css('display','inline-block').
                    animate({'width':( nowcum/(data.level[i].levelCond-data.level[i-1].levelCond)*100+'%')},3000);
                    return;
                }
                $(this).parent().next().find('.bar').css('display','inline-block').
                animate({'width':(cumtrapz>=data.level[i].levelCond?data.level[i].levelCond:cumtrapz)/data.level[i].levelCond*100+'%'},3000,mynext);
            }
        })
    }
})